<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五角星</title>
    <style type="text/css">
        .wrap{
            width: 500px;
            margin:0 auto;
            }
        #starCanvas{
            border: 1px solid #ccc;
            width: 500px;
            height:500px;
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div class="wrap">    
        <canvas id='starCanvas' width='500px' height="500px"></canvas>
    </div>
<script>
    drawStar(250,250,100);
    function drawStar(cx,cy,r){
        var dotArray=starDotArray(cx,cy,r);
        console.log(dotArray);
        var canvas=document.getElementById('starCanvas');
        var cx=canvas.getContext('2d');
        cx.strokeStyle='red';
        cx.lineJoin='round';
        for(var i=0;i<dotArray.length;i++){
            if(i==0){
                cx.moveTo(dotArray[i].x,dotArray[i].y);
            }else{
                cx.lineTo(dotArray[i].x,dotArray[i].y);
            }
            
        }
        cx.closePath();
        cx.stroke();
        //cx.fillStyle='yellow'
        //cx.fill();
    }
    function starDotArray(cx,cy,r){
        //圆心坐标 以及圆半径
        var dotArray=[];
        var unitDeg=Math.PI * 4 / 5;
        var rotateDeg=unitDeg/8;
        for(var i=0;i<5;i++){
            var tempDit=unitDeg*i-rotateDeg;
            var y = Math.sin(tempDit) * r + cy;
            var x = Math.cos(tempDit) * r + cx;
            dotArray.push({x:x,y:y});
        }
        return dotArray;
        
    }
</script>

    
</body>
</html>